<!--
	作者：819115696@qq.com
	时间：2016-06-23
	描述：https://git.oschina.net/RobertGoudan/HB.git
-->
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
		<script type="text/javascript" src="js/test.js"></script>
		<style>
			* {
				margin: 0px;
			}
			
			.d {
				margin-top: 50px;
				width: 400px;
				height: 400px;
				background-color: lavenderblush;
			}
			
			#listBox td:hover {
				background-color: lightblue;
			}
			
			#listBox {
				width: 100px;
				position: absolute;
				border: 1px solid lawngreen;
				overflow-x: hidden;
				overflow-y: auto;
				display: none;
				background-color: white;
			}
			
			#listBox td {
				width: 300px;
				padding: 3px;
				padding-left: 5px;
				border: 1px solid #F3EEEE;
			}
			
			#listBox tr {
				border: 1px solid lightgreen;
			}
			
			#listBox .pitchOn {
				background-color: #F08080 !important;
			}
			
			#inputBox {
				width: 200px;
				margin: 30px;
				height: 20px;
			}
			
			.chufa {
				background-color: lavender;
				width: 10px;
				position: absolute;
				border: 1px solid lightgray;
			}
		</style>
		<script>
			$(function() {
				//init();
				xialadnaxian("#inputBox")

				//huoqu() 
			})

			function huoqu(finput) { //获取生成下拉
				var sx = "测试1,测试2,测试3,测试4,测试5,"
				var ax = sx.split(",");
				var ftable = $("<table  border='0' cellspacing='0' style='width: 100%'></table>");
				for(i = 0; i < ax.length - 1; i++) { //注意最后一个逗号,
					var td = $("<td style='border:none ;'></td>").text(ax[i]);
					ftable.append($("<tr></tr>").append(td))
				}
				$(finput).after($("<div id='listBox' style='display: none;position:absolute;background-color: white;border: 1px solid #78B4FF;'></div>").append(ftable))
			}

			function xialadnaxian(inputx) { //绑定下拉单选,参数1:输入框元素,
				huoqu(inputx)

				var s = $(inputx).offset();
				$("<div class='chufa'></div>").appendTo("body");
				$("#listBox").css({
					"top": s.top + $(inputx).outerHeight(),
					"left": s.left,
					"width": $(inputx).outerWidth()
				})
				$(".chufa").css({
					"top": s.top,
					"left": s.left + $(inputx).outerWidth() - 10,
					"height": $(inputx).outerHeight() - 2
				})

				$("#listBox tr").each(function(i) {
					if(i % 2 != 0) {
						$(this).css("background-color", "#F3EEEE")
					}
				})
				bx = true;

				$("body").delegate(inputx, "click", function(event) {
					$("#listBox").css("display", "block")
					if(bx) {

					} else {

					}
					event.stopPropagation();
				})
				$("body").delegate(".chufa", "click", function(event) {
					if($("#listBox").css("display") == "none") {
						$("#listBox").css("display", "block")
						bx = false
					} else {
						$("#listBox").css("display", "none")
						bx = true
					}
					event.stopPropagation();
				})
				$("body").delegate("#listBox td", "click", function() {
					$(inputx).val($(this).text())
					$("#listBox").css("display", "none")
				})
				$("body").click(function() {
					if($("#listBox").css("display") != "none") {
						$("#listBox").css("display", "none")
					}
				})
			}
		</script>
	</head>

	<body>
		<div class="d">

			<input type="text" id="inputBox" />

		</div>
	</body>

</html>